<template>
  <div style="margin: 20px">
    <el-form :model="queryForm" ref="queryForm" :rules="rules" class="demo-form-inline">
      <el-row>
        <el-col :span="12">
          <el-form-item label="父级菜单" label-width="100px">
            <el-button>{{this.parentName}}</el-button>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="菜单名称" label-width="100px" prop="menuName">
            <el-input v-model="queryForm.menuName" placeholder="菜单名称" :maxlength="10"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="菜单url" label-width="100px" prop="menuUrl">
            <el-input v-model="queryForm.menuUrl" placeholder="菜单url" :maxlength="150"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="资源地址" label-width="100px">
            <el-input v-model="queryForm.resource" placeholder="菜单名称" :maxlength="150" ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="是否隐藏" label-width="100px">
            <el-radio v-model="queryForm.hidden" label="0">显示</el-radio>
            <el-radio v-model="queryForm.hidden" label="1">隐藏</el-radio>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="icon样式" label-width="100px" prop="icon">
            <el-input v-model="queryForm.icon" placeholder="icon" :maxlength="100"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
export default {
  name: 'MenuAdd',
  props: {
    menuId: {
      type: Number,
      default: 0
    },
    // 弹框的开关
    dialogShow: {
      type: Boolean,
      default: false
    },
    parentId: {
      type: Number,
      default: 0
    },
    parentName: {
      type: String,
      default: ''
    }
  },
  watch: {
    dialogShow () {
      // 打开的时候
      debugger
      if (this.dialogShow) {
        if (this.menuId) {
          this.getMenu(this.menuId)
        }
      } else {
        // 清空
        this.resetForm()
      }
    }
  },
  data() {
    return {
      queryForm: {
        hidden: '0',
        menuName: '',
        menuUrl: '',
        resource: '',
        icon: ''
      },
      rules: {
        menuName: [
          { required: true, message: '请输入菜单名称', trigger: 'blur' }
        ],
        menuUrl: [
          { required: true, message: '请输入菜单url', trigger: 'blur' }
        ],
        resource: [
          { required: true, message: '请输入资源文件地址', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    this.getMenu(this.menuId)
  },
  methods: {
    // 清空
    resetForm() {
      this.queryForm = {
        hidden: '0',
        menuName: '',
        menuUrl: '',
        resource: '',
        icon: ''
      }
      this.$refs['queryForm'].resetFields()
    },
    // 获取菜单数据
    getMenu(menuId) {
      // get数据
      this.$http.get('/frontend/api/authority/getMenu', { id: menuId }).then(result => {
        if (result) {
          this.queryForm.menuName = result.title
          this.queryForm.menuUrl = result.url
          this.queryForm.hidden = result.hidden + ''
          this.queryForm.resource = result.resource
        }
      }, result => {
        this.$message.error(result.message)
      })
    },
    save (success) {
      this.$refs.queryForm.validate((valid) => {
        if (valid) {
          const param = {
            id: this.menuId,
            parentId: this.parentId,
            url: this.queryForm.menuUrl, // 菜单url
            name: this.queryForm.menuUrl, // 菜单名称
            title: this.queryForm.menuName, // 菜单名称
            resource: this.queryForm.resource, // 文件资源位置
            hidden: this.queryForm.hidden, // 是否隐藏：0 false；1 true
            icon: this.queryForm.icon // element ui图标
          }
          this.$http.post('/frontend/api/authority/saveMenu', param).then(result => {
            success()
          }, result => {
            this.$message.error(result.message)
          })
        }
      })
    }
  }
}
</script>

<style scoped>

</style>
